<template>
  <div class="text-[0.7rem]">
    {{ currentTime || "--" }}
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

onMounted(() => {
  getCurrentTime();
});

const currentTime = ref("");
async function getCurrentTime() {
  const now = new Date();

  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const date = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  const weekdays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const day = now.getDay(); // 星期几（0-6，0表示星期日）
  // ${weekdays[day] || ""}

  currentTime.value = `${year}/${month}/${date} ${hours}:${minutes}` || "";
}

setInterval(() => {
  getCurrentTime();
}, 500);
</script>

<style scoped lang="scss">
</style>